<template>
  <div class="mine">
    <!-- 登入头部 -->
    <header>
      <div class="login">
        <div class="userhead">
          <img src="../../assets/img/mine/userhead.png" alt="" />
        </div>
        <div class="username">
          <p class="user" v-if="token">{{ userName }}</p>
          <p class="user" v-else @click="tologin">立即登录</p>
          <span>你我已经相识0天</span>
        </div>
      </div>
      <!-- 个人动态 -->
      <div class="status">
        <ul>
          <li>
            <span>0</span>
            <p>我的关注</p>
          </li>
          <li>
            <span>0</span>
            <p>我的动态</p>
          </li>
          <li>
            <span>0</span>
            <p>我的粉丝</p>
          </li>
          <li>
            <span>0</span>
            <p>测试记录</p>
          </li>
        </ul>
      </div>
    </header>
    <!-- 订单余额 -->
    <nav>
      <ul>
        <li @click="accountClick">
          <img src="../../assets/img/mine/矢量智能对象@2x(7).png" alt="" />
          <p>账户余额</p>
        </li>
        <li>
          <img src="../../assets/img/mine/矢量智能对象@2x(8).png" alt="" />
          <p>红包卡卷</p>
        </li>
        <li>
          <img src="../../assets/img/mine/矢量智能对象@2x(9).png" alt="" />
          <p>推广返利</p>
        </li>
        <li>
          <img src="../../assets/img/mine/矢量智能对象@2x(10).png" alt="" />
          <p>预约订单</p>
        </li>
        <li>
          <img src="../../assets/img/mine/矢量智能对象@2x(11).png" alt="" />
          <p>倾诉记录</p>
        </li>
        <li>
          <img src="../../assets/img/mine/矢量智能对象@2x(12).png" alt="" />
          <p>我的课程</p>
        </li>
      </ul>
    </nav>
    <!-- 设置 -->
    <div class="setting">
      <ul>
        <li @click="helpClick">
          <img src="../../assets/img/mine/矢量智能对象@2x.png" alt="" />帮助中心
        </li>
        <li>
          <img
            src="../../assets/img/mine/矢量智能对象@2x(1).png"
            alt=""
          />隐私安全
        </li>
        <li @click="handleclick">
          <img src="../../assets/img/mine/矢量智能对象@2x(2).png" alt="" />设置
        </li>
        <li @click="introduceClick">
          <img
            src="../../assets/img/mine/矢量智能对象@2x(3).png"
            alt=""
          />壹点灵介绍
        </li>
        <li @click="introduceClick">
          <img
            src="../../assets/img/mine/矢量智能对象@2x(4).png"
            alt=""
          />关于我们
        </li>
      </ul>
    </div>
    <!-- 分享 -->
    <div class="share">
      <ul>
        <li>
          <img src="../../assets/img/mine/矢量智能对象@2x(5).png" alt="" />
          <van-cell title="分享" @click="showShare = true" />
          <van-share-sheet
            v-model:show="showShare"
            title="立即分享给好友"
            :options="options"
            @select="onSelect"
          />
        </li>
        <li>
          <img
            src="../../assets/img/mine/矢量智能对象@2x(6).png"
            alt=""
          />专家入驻
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import cookie from "../../utils/tool";
import { onMounted, ref } from "vue";
import { Toast } from "vant";
export default {
  setup() {
    const route = useRouter(); //页面跳转引入的路由
    // 跳转到设置的路由
    const handleclick = () => route.push("/quit");
    // 点击分享上划窗口
    const showShare = ref(false);
    const options = [
      { name: "微信", icon: "wechat" },
      { name: "微博", icon: "weibo" },
      { name: "复制链接", icon: "link" },
      { name: "分享海报", icon: "poster" },
      { name: "二维码", icon: "qrcode" },
    ];
    const onSelect = (option) => {
      Toast(option.name);
      showShare.value = false;
    };
    //  const userName = `${cookie.get('username').substring(0,3)}****${cookie.get('username').substring(7,11)}`;
    // onMounted(()=>{
    //   userName = cookie.get('username')
    // })
    //跳转登录页面
    const tologin = () => route.push("/login");
    let userName = ref("");
    let token = ref(true);
    onMounted(() => {
      // userName = cookie.get('username')
      // token=cookie.get('token');
      if (cookie.get("token")) {
        token.value = true;
        // 保护用户设置账号数字隐藏替换
        userName.value = `${cookie.get("username").substring(0, 3)}****${cookie
          .get("username")
          .substring(7, 11)}`;
      } else {
        token.value = false;
      }
    });
    const introduceClick = () => route.push("/introduce");
    const helpClick = () => route.push("/helpcenter");
    const accountClick = () => route.push("/account");
    return {
      handleclick,
      route,
      userName,
      token,
      tologin,
      options,
      onSelect,
      showShare,
      introduceClick,
      helpClick,
      accountClick,
    };
  },
};
</script>

<style lang="less" scoped>
.mine {
  width: 100%;
  position: relative;
  header {
    width: 100%;
    height: 189px;
    background: #2798f4;
    .login {
      display: flex;
      // align-items: center;
      padding: 10px 10px;
      .userhead {
        img {
          width: 74px;
          height: 74px;
          display: inline-block;
          border-radius: 50%;
        }
      }
      .username {
        width: 100%;
        color: rgb(230, 253, 255);
        margin-left: 10px;
        position: relative;
        p {
          font-size: 20px;
          position: absolute;
          top: -8px;
          left: 0;
        }
        span {
          font-size: 10px;
          position: absolute;
          top: 44px;
          left: 0;
        }
      }
    }
    .status {
      width: 100%;
      color: rgb(230, 253, 255);
      ul {
        display: flex;
        align-items: center;
        li {
          width: 25%;
          display: flex;
          flex-direction: column;
          align-items: center;
          span {
            font-size: 18px;
          }
          p {
            font-size: 10px;
          }
        }
      }
    }
  }
  nav {
    width: 90%;
    height: 136px;
    box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    position: absolute;
    top: 169px;
    left: 5%;
    background: #fff;
    ul {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding-top: 10px;
      li {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          padding-top: 10px;
          width: 24px;
          height: 24px;
        }
        p {
          font-size: 10px;
          line-height: 0px;
          color: #0e0e0e;
        }
      }
    }
  }
  .setting {
    width: 90%;
    position: absolute;
    top: 320px;
    left: 5%;
    font-size: 12px;
    ul {
      border-radius: 10px;
      box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.2);
      li {
        display: flex;
        align-items: center;
        height: 38px;
        line-height: 38px;
        border-bottom: 1.5px solid rgb(230, 228, 228);
        &:last-child {
          border: none;
        }
        img {
          display: inline-block;
          width: 24px;
          height: 24px;
          margin: 0 10px;
        }
      }
    }
  }
  .share {
    width: 90%;
    position: absolute;
    top: 530px;
    left: 5%;
    font-size: 12px;
    ul {
      border-radius: 10px;
      box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.2);
      li {
        display: flex;
        align-items: center;
        height: 38px;
        line-height: 38px;

        position: relative;

        &:first-child {
          img {
            position: absolute;
            top: 8px;
            left: 0px;
          }
        }
        &:last-child {
          border-top: 1.5px solid rgb(230, 228, 228);
        }
        img {
          display: inline-block;
          width: 24px;
          height: 24px;
          margin: 0 10px;
          z-index: 888;
        }
        /deep/.van-cell__title {
          font-size: 12px;
          text-indent: 28px;
        }
      }
    }
  }
}
</style>
